<template>
    <div class="date">
        <mu-form :model="dates">
            <mu-row gutter>
                <mu-col span="3" sm="3" lg="3">
                    <mu-form-item label="开始日期">
                        <mu-date-input color="primary" v-model="dates.startTime" @change="chioseStart"></mu-date-input>
                    </mu-form-item>
                    <!-- <mu-date-input color="primary" v-model="dates.startTime" label="选择开始日期" label-float full-width landscape @change="chioseStart"></mu-date-input> -->
                </mu-col>
                <mu-col span="3" sm="3" lg="3">
                    <mu-form-item label="结束日期">
                        <mu-date-input :max-date="maxDate" color="primary" v-model="dates.endTime" @change="chioseEnd"></mu-date-input>
                    </mu-form-item>
                    <!-- <mu-date-input :max-date="maxDate" color="primary" v-model="dates.endTime" label="选择结束日期" label-float full-width landscape @change="chioseEnd"></mu-date-input> -->
                </mu-col>
                <mu-col span="5" sm="0" lg="4">
                    <mu-button v-for="(item,index) in shortcutKey" :class="{activeClass:activeKey ===index}" :key="index" @click="active(index)">{{item.name}}</mu-button>
                </mu-col>
            </mu-row>
        </mu-form>
    </div>
</template>
<script>
import moment from 'moment';
export default {
    data() {
        return {
            shortcutKey: [{ name: '7天', value: 7, unit: 'days' }, { name: '30天', value: 30, unit: 'days' }, { name: '3个月', value: 3, unit: 'months' },],
            activeKey: 0,
            dates: {
                startTime: moment().subtract(7, 'days').valueOf(),
                endTime: moment(new Date()).valueOf()
            },
            maxDate: new Date()
        };
    },
    methods: {
        active(index) {
            this.activeKey = index;
            const value = this.shortcutKey[index].value;
            const unit = this.shortcutKey[index].unit;
            this.dates.startTime = moment().subtract(value, unit).valueOf();
            this.dates.endTime = moment().valueOf();
            this.available();
        },
        chioseStart(value) {
            if (!moment(value).isSame(this.dates.startTime)) {
                if (moment(value).valueOf() < this.dates.endTime) {
                    this.dates.startTime = moment(value).valueOf();
                    this.available();
                } else {
                    this.$toast.error('结束时间不能小于开始时间！');
                }
            }
        },
        chioseEnd(value) {
            if (!moment(value).isSame(this.dates.endTime)) {
                if (moment(value).valueOf() > this.dates.startTime) {
                    this.dates.endTime = moment(value).valueOf();
                    this.available();
                } else {
                    this.$toast.error('结束时间不能小于开始时间！');
                }
            }
        },
        available() {
            const { startTime, endTime } = this.dates;
            let sendDate = {
                'startTime': moment(startTime).valueOf(),
                'endTime': moment(endTime).valueOf()
            };
            this.$emit('triggerDate', sendDate);
        }
    },
    mounted() {
        this.$emit('triggerDate', this.dates);
    }
};
</script>
<style lang="scss">
@import "../../assets/css/common.scss";
.date {
  margin: 0 26px;
  padding: 0;
  .col {
    text-align: left;
    .mu-button {
      margin: 20px 15px 0 0;
    }
    .activeClass {
      background: $MAIN_BLUE_COLOR;
      color: $WHITE_COLOR;
    }
    .mu-raised-button {
      box-shadow: none;
      border: 1px solid $BORDER_COLOR;
    }
  }
  .col-3 {
    min-width: 152px;
  }
  .col-5 {
    min-width: 325px;
  }
}
</style>
